{extend name="index/index" /}
{block name="main"}
<style>
    .post-title{
        color: #0D4667;
    }

    .post-meta H3{
        color: #FFF;
    }

    .post-meta input{
        color: #FFF;
    }
</style>
<!-- Start of Page Container -->
<div class="page-container" style="background-color: #195F88;height: 3000px; width: 100%;">
    <div class="container" style="background-color: #619EC2;height: 3000px; width: 60%;margin: 0px auto;">
        <div class="row">
            <!-- start of page content -->
                <div class="span8 main-listing">
                    <article class="format-standard type-post hentry clearfix">
                        <header class="clearfix">

                            <h3 class="post-title">
                                    编辑个人密码<br><br>
                            </h3>
                    <form id="edit-form" class="row" action="{:url('index/login/doEditPass')}" method="post" style="margin-left: 15px" name="myform" onsubmit="return checkForm()">
                        <header class="clearfix">
                            <div class="post-meta clearfix">
                                <span class="category"><h3>密码</h3></span>
                                <input type="password" name="password" id="password" class="input-xlarge required" onblur="checkPass()">
                                <span id="ptab"></span>
                            </div><!-- end of post meta -->
                        </header>

                        <header class="clearfix">
                            <div class="post-meta clearfix">
                                <span class="category"><h3>再次输入密码</h3></span>
                                <input type="password" name="repassword" id="repassword" class="input-xlarge required" onblur="checkRepass()">
                                <span id="rptab"></span>
                            </div><!-- end of post meta -->
                        </header>

                        

                        <div class="span6 offset2 bm30">
                        <br><br>
                        <input type="submit" name="submit" class="btn btn-inverse">
                        <img src="{$IMG_PATH}loading.gif" id="contact-loader" alt="Loading...">
                        </div>
                    </form>
                    </article>



                </div>
                <!-- end of page content -->
        </div>
    </div>
</div>
<!-- End of Page Container -->

<script>
    function checkPass()
            {
                console.log('checkpass');
                /*找元素对象也可以通过name找 只要是单一的name可以跳层找*/
                var pass = document.myform.password.value;
                var ptab = document.getElementById('ptab');
                if(pass.length<6 || pass.length>18){
                    ptab.innerHTML = '* 密码不合法'
                    ptab.style.color = '#f00';
                    return false;
                }else{
                    ptab.innerHTML = '* 密码正确'
                    ptab.style.color = '#0a0';
                    /*如果没有return会怎么样*/
                    return true;
                }
            }

            // 验证密码
            function checkRepass(){
                console.log('checkrepass');
                var pass = document.myform.password.value;
                var repass = document.myform.repassword.value;
                var rptab = document.getElementById('rptab');
                if (pass !== repass) {
                rptab.innerHTML = '* 两次密码输入不一致';
                rptab.style.color = '#f00';
                return false;
                } else {
                    rptab.innerHTML = '* 通过验证';
                    rptab.style.color = '#0a0';
                    return true;
                }
            }

        function checkForm() {
            return checkPass() && checkRepass();
        }
</script>
{/block}